<template>
  <el-scrollbar>
  <!--<el-button type="primary" round @click="add()">+添加</el-button>-->
  <el-table :data="tableDataFromDB" height ="500" stripe style="width: 100%">
    <el-table-column fixed prop="natid" label="患者编码" width="90" />
    <el-table-column prop="natpatientId" label="患者账号" width="120" />
    <el-table-column prop="natpatientName" label="患者名" width="120" />
    <el-table-column prop="natpatientTelephone" label="患者电话" width="120" />
    <el-table-column prop="natdepartmentName" label="核酸类型" width="120" />
    <el-table-column prop="natResult" label="核酸结果" width="90" />
    <el-table-column prop="natpatientPassword" label="患者密码" width="120" />
    <el-table-column prop="natcreateTime" label="创建时间" width="200" />
    <el-table-column fixed="right" label="操作" width="300">
      <template #default="row">
        <el-button type="success" @click="handleClick(row)"> 编辑核酸结果 </el-button>
        <!-- 删除确认框 -->
        <el-popconfirm title="确定要删除吗?" @confirm="del(row)">
          <template #reference>
            <el-button type="danger">删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogVisible" title="编辑" width="30%">
    <el-form label-width="120px">
      <el-form-item label="核酸结果">
        <el-input v-model="info_edit.natResult" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="edit()" v-model="dialogVisible"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
 </el-scrollbar>
  
</template>

<script>
import { get } from '@/utils/request'
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisible_add: false,
      info_edit: {},
      info_add:{},
      tableDataFromDB: [ ]

    }
  },

   mounted() {
    get('/getAllnatpatients').then((res) => {
      console.log(res)
      this.tableDataFromDB = res.data
      console.log(this.tableDataFromDB)
    })
 },
  methods: {
    handleClick(data) {
      console.log(data)
      //console.log(data.row)
      this.info_edit = data.row
      this.dialogVisible = !this.dialogVisible
    },
    add(){
      this.dialogVisible_add = !this.dialogVisible_add
    },
    insert(){
      this.dialogVisible_add = !this.dialogVisible_add
      get('/addnatpatient', this.info_add).then((res) => {
      console.log(res.data)
      ElMessage({
          message: '添加成功',
          type: 'success'
        })
        //refresh page
        window.location.reload()
       })      
    },
    edit() {
       this.dialogVisible = !this.dialogVisible
       console.log(this.info_edit)
       //调整日期格式
       var dt = new Date(this.info_edit.natcreateTime)
       let year = dt.getFullYear()
       let month = dt.getMonth() + 1
       let date = dt.getDate()
       this.info_edit.natcreateTime = year + '/' + month + '/' + date
       get('/updatenatpatient', this.info_edit).then((res) => {
       console.log(res)
       ElMessage({
          message: '修改成功',
          type: 'success'
                 })
        window.location.reload()
    }) 
    },
     reset(adg) {
       //this.adg = row
      get('/updatenatpatientPassword', {
        natid: adg.row.natid,
        natpatientPassword: 123456
      })
      ElMessage({
        message: '重置密码成功',
        type: 'success'
      })
      window.location.reload()
    },
//.................
     del(row) {
         console.log(row.row.natid)

      get('/deletenatpatient', {
        natid:row. row.natid
      })
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
      window.location.reload()
    },

  }
  
}
</script>
<style scoped>
.scrollbar-demo-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>